<template>
  <div class="app-container">

    <el-container>
      <el-header>
        <el-select v-model="selectComponent">
          <el-option
              v-for="(item, index) in formSelect"
              :key="index"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
        <el-button @click="loadedComponent">加载组件</el-button>
        <el-button @click="getMetadata">获取元数据</el-button>
        <!--  -->
        <el-button @click="setMetadata">合并元数据</el-button>
        <!-- 数据转换 -->
        <el-button @click="getCollectFormData">加载条件数据数据</el-button>
        <el-cascader
            v-model="collectData"
            :options="collect"
            :props="{ checkStrictly: true, label: 'label', value: 'model', children: 'item' }"
            :show-all-levels="false"
            clearable
            @change="handleCascadeChange"
        ></el-cascader>
        <!-- 处理布局配置 -->
        <el-button @click="visible = true">配置表单</el-button>
        <el-button @click="handleCollectResult">获取表单结果集</el-button>
      </el-header>

      <el-container>
        <el-main class="x_container">
          <component :is="component" ref="customFormComponent"/>
        </el-main>
      </el-container>
    </el-container>

    <el-dialog
        title="表单配置"
        :visible.sync="visible"
        append-to-body
        width="70%"
        :close-on-click-modal="false"
        @open="loadLayoutConfig">
      <el-table
          :data="layoutTreeData"
          :tree-props="{children: 'item'}"
          row-key="name"
          height="400px"
          border
          default-expand-all
      >
        <el-table-column label="名称" prop="label" width="300" />
        <el-table-column label="xType" prop="xType" width="120" />
        <el-table-column label="值" prop="name" width="160" />
        <el-table-column label="隐藏/显示" width="140" align="center">
          <template slot-scope="{ row }">
            <el-switch
                v-if="row.xType !== 'tabs' && row.xType !== 'form'"
                v-model="row.show"
            />
          </template>
        </el-table-column>
        <el-table-column label="可写/只读" width="140" align="center">
          <template slot-scope="{ row }">
            <el-switch
                v-if="row.xType !== 'tabs' && row.xType !== 'tabPanel'
                  && row.xType !== 'form' && row.xType !== 'table'
                  && row.xType !== 'card'"
                v-model="row.disabled"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button v-if="row.xType === 'table'" type="text" @click="$refs.tableConf.showTableEdit(row)">配置表格</el-button>
            <el-button v-if="row.xType === 'card'" type="text">配置卡片</el-button>
          </template>
        </el-table-column>
      </el-table>

      <table-conf ref="tableConf"></table-conf>

      <template #footer>
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submitConfig">确 认</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script>

import FormComponents from '@/form/index'
import TableConf from "@/TableConf";

export default {

  components: {
    TableConf,
    ...FormComponents
  },

  data() {
    return {
      visible: false,
      selectComponent: '',
      component: '',
      collect: [],

      // 集合数据集
      collectData: '',

      // 布局配置
      select: {},
      // LayoutTree节点数据
      layoutTreeData: [],
    }
  },
  computed: {

    formSelect() {
      return Object.keys(FormComponents).map(key => {
        return {label: key, value: key}
      })
    },

  },
  methods: {
    // 加载组件
    loadedComponent() {
      if (this.selectComponent) {
        this.component = this.selectComponent
      }
    },

    //----
    getMetadata() {
      if (this.$refs.customFormComponent) {
        const metadata = this.$refs.customFormComponent.getMetadata()
        console.log(metadata)
        return this.$refs.customFormComponent.getMetadata()
      }
    },

    //----
    setMetadata() {
      let metadata = {
        xType: 'tabs',
        label: '定制化表单',
        name: 'form',
        activeTab: 'labelOne',
        item: [
          {
            xType: 'tabPanel',
            name: 'labelOne',
            label: '标签一',
            item: [
              {
                xType: 'form',
                name: 'formOne',
                label: '表单111',
                inline: false,
                labelSuffix: ':',
                item: [
                  {
                    xType: 'input',
                    name: 'username',
                    label: '登录名',
                    tooltip: '登录名的<br />提示信息',
                    show: false
                  }
                ]
              }
            ]
          }
        ]
      }
      this.$refs.customFormComponent.setMetadata(metadata)
    },

    //----
    getCollectData() {
      if (this.$refs.customFormComponent) {
        let formConfig = this.$refs.customFormComponent.getFormConfig()
        if (formConfig.xType === 'tabs') {
          let getData = (item) => {
            if (item.xType === 'form') {
              return {
                label: item.label,
                model: item.name,
                item: item.item.map(it => getData(it))
              }
            }
            else if (item.xType === 'tabPanel') {
              return {
                label: item.label,
                model: item.name,
                item: item.item && Array.isArray(item.item) ? item.item.map(it => getData(it)) : undefined
              }
            }
            else {
              return {
                label: item.label,
                model: item.name,
                item: item.item && Array.isArray(item.item) ? [...item.item.map(it => getData(it))] : undefined
              }
            }
          }
          this.collect = formConfig.item.filter(it => it.xType).map(it => getData(it))
        }
      }
      console.log(this.collect)
    },

    getCollectFormData() {
      if (this.$refs.customFormComponent) {
        let formConfig = this.$refs.customFormComponent.getFormConfig()
        if (formConfig.xType === 'form') {
          let getData = (item) => {
            // if (item.xType === 'form') {
            //   return {
            //     label: item.label,
            //     model: item.name,
            //     item: item.item.map(it => getData(it))
            //   }
            // }
            // else if (item.xType === 'tabPanel') {
            //   return {
            //     label: item.label,
            //     model: item.name,
            //     item: item.item && Array.isArray(item.item) ? item.item.map(it => getData(it)) : undefined
            //   }
            // }
            if (item.xType === 'card') {
              return {
                label: item.label,
                model: item.name,
                item: item.item.map(it => getData(it))
              }
            }
            else {
              return {
                label: item.label,
                model: item.name,
                item: item.item && Array.isArray(item.item) ? [...item.item.map(it => getData(it))] : undefined
              }
            }
          }
          this.collect = [getData(formConfig)]
        }
      }
      console.log(this.collect)
    },


    handleCascadeChange(value) {
      console.log(value)
    },

    //----
    handleNodeClick(data, node, self) {
      this.select = data
      if (typeof data.show === 'undefined') {
        this.select['show'] = true
      }
      if (typeof data.disabled === 'undefined') {
        this.select['disabled'] = false
      }
    },
    loadLayoutConfig() {
      this.layoutTreeData = [this.getMetadata()]
    },

    submitConfig() {
      if (this.$refs.customFormComponent) {
        this.$refs.customFormComponent.setFormConfig(this.layoutTreeData[0])
      }
      this.visible = false
    },

    handleCollectResult() {
      if (this.$refs.customFormComponent) {
        console.log(this.$refs.customFormComponent.getFormData())
      }
    }

  }
}
</script>
<style lang="scss" scoped>
.x_container {
  height: calc(100vh - 80px);
  border: 1px #409eff dashed;
  overflow-y: auto;
  padding: 10px;
  margin-right: 10px;
}
.x_layout_tree {
  height: calc((100vh - 134px) / 2);
  border: 1px #409eff dashed;
  overflow-y: auto;
  padding: 10px;
}
.x_layout_config {
  height: calc((100vh - 134px) / 2);
  margin-top: 10px;
  border: 1px #409eff dashed;
  overflow-y: auto;
  padding: 10px;
}
</style>
